<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
    <script src="{$Think.config.httpFlag}{$Think.config.google_map_url}" async="async"></script>
</head>
<body>
<div class="layui-fluid main">
    <div id="map" style="width: 600px;height: 300px;margin:10px 50px 10px 10px;float: left;"></div>
    <fieldset class="layui-elem-field site-demo-button" style="width: 1100px;margin-top: 15px;border:0;float: left;">
        <form class="layui-form serch" action="{:url('admin/hotel/showHotel')}" method="post">
            <div style="width: 550px;margin-top: 15px;border:0;float: left;">
                <div class="layui-form-item" style="float: left;">
                    <input type="hidden" name="CityCode" value="{$CityCode}">
                    <input type="hidden" name="lat" value="{notempty name='$wherelist.lat'}{$wherelist.lat}{/notempty}">
                    <input type="hidden" name="lng" value="{notempty name='$wherelist.lng'}{$wherelist.lng}{/notempty}">
                    <div style="width:100%;float:left;">
                        <div class="layui-input-inline" style="width:90px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>酒店名称：</p>
                        </div>
                        <div class="layui-input-inline" style="width:400px;">
                            <input type="text" name="keywords" autocomplete="off" value="{if isset($wherelist['keywords'])}{$wherelist['keywords']}{/if}" lay-verify="VendorName" placeholder="请输入酒店英文名" class="layui-input layui-btn-sm">
                        </div>
                    </div>

                    <div style="width:100%;margin-top:10px;float:left;">
                        <div class="layui-input-inline" style="width:70px;margin-left:20px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>地址：</p>
                        </div>
                        <div class="layui-input-inline" style="width:400px;">
                            <input type="text" id="address" name="address" autocomplete="off" value="{if isset($wherelist['address'])}{$wherelist['address']}{/if}" lay-verify="address" placeholder="请输入英文地址" class="layui-input layui-btn-sm">
                            <div class="addressbox"></div>
                        </div>
                    </div>

                    <div style="width:100%;margin-top:10px;float:left;">
                        <div class="layui-input-inline" style="width:90px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>入住日期：</p>
                        </div>
                        <div class="layui-input-inline" style="width:400px;">
                            <input name="arrivalDate" value="{if isset($wherelist['arrivalDate'])}{$wherelist['arrivalDate']}{/if}"  id="arrivalDate" placeholder="入住日期" autocomplete="off" class="layui-input" type="text">
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 400px;margin-top: 15px;border:0;float: left;">
                <div class="layui-form-item" style="float: left;">
                    <div style="width:100%;float:left;">
                        <div class="layui-input-inline" style="width:90px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>房间数：</p>
                        </div>
                        <div class="layui-input-inline" style="width:120px;">
                            <input type="number" name="NumberOfRooms" autocomplete="off" value="{if isset($wherelist['NumberOfRooms'])}{$wherelist['NumberOfRooms']}{/if}" lay-verify="NumberOfRooms" placeholder="房间数" class="layui-input layui-btn-sm">
                        </div>
                    </div>

                    <div style="width:100%;margin-top:10px;float:left;">
                        <div class="layui-input-inline" style="width:90px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>成人：</p>
                        </div>
                        <div class="layui-input-inline" style="width:120px;">
                            <input type="number" name="adult" autocomplete="off" value="{if isset($wherelist['adult'])}{$wherelist['adult']}{/if}" lay-verify="adult" placeholder="成人" class="layui-input layui-btn-sm">
                        </div>
                    </div>

                    <div style="width:100%;margin-top:10px;float:left;">
                        <div class="layui-input-inline" style="width:90px;text-align: right;font-size: 16px;line-height: 32px;">
                            <p>儿童：</p>
                        </div>
                        <div class="layui-input-inline" style="width:120px;">
                            <input type="number" name="child" autocomplete="off" value="{if isset($wherelist['child'])}{$wherelist['child']}{/if}" lay-verify="child" placeholder="儿童" class="layui-input layui-btn-sm">
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 500px;border:0;float: left;">
                <div style="width:100%;margin-top:10px;float:left;">
                    <button style="margin-left:40px;" class="layui-btn layui-btn-default layui-btn-sm" lay-submit="" lay-filter="serch" id="search">查询酒店</button>
                </div>
            </div>

        </form>
    </fieldset>
    <table class="layui-table" lay-even="" lay-skin="line">
        <colgroup>
            <col width="7%">
            <col width="7%">
            <col width="7%">
            <col width="7%">
            {if !isset($renderFlag)}
            <col width="7%">
            {/if}
            <col width="7%">
            <col width="7%">
            <col width="30%">
            <col width="12%">
            <col width="7%">
        </colgroup>
        <thead>
        <tr>
            <th>VendorID</th>
            <th>酒店名</th>
            <th>所属城市</th>
            <th>展示图</th>
            {if !isset($renderFlag)}
            <th>距离</th>
            {/if}
            <th>评分</th>
            <th>星级</th>
            <th>描述</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {if !empty($info)}
        {volist name="info" id="vo"}
        <tr>
            <td>{$vo.VendorID}</td>
            <td>{$vo.VendorName}</td>
            <td>{$vo.City}</td>
            <td>
                <!--<img src="{$vo.VendorImage}" width="20" height="20">-->
            </td>
            {if !isset($renderFlag)}
            <td>{$vo.distance}</td>
            {/if}
            <td>{$vo.WebPriority}</td>
            <td>{$vo.HotelRating}</td>
            <td style="width:100%;">
                <div style="width:100%;height:150px;overflow-y:auto;">
                    {$vo.VendorDescription}
                </div>
            </td>
            <td>{$vo.VendorAddress}</td>
            <td>
                <a href="{:url('admin/hotel/search',['VendorID'=>$vo.VendorID,'CityCode'=>$vo.CityCode,'arrivalDate'=>$wherelist['arrivalDate'],'NumberOfRooms'=>$wherelist['NumberOfRooms'],'adult'=>$wherelist['adult'],'child'=>$wherelist['child']])}" class="layui-btn layui-btn-xs layui-btn-danger" target="_blank"  style="margin-right: 0;font-size:12px;">询价</a>
            </td>
        </tr>
        {/volist}
        {/if}
        </tbody>
    </table>

    {if isset($renderFlag)}
    <div>{$info->render()}</div>
    {/if}

    <script src="__PUBLIC__/layui/layui.js"></script>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <script>
        layui.use(['layer', 'form', 'laydate'], function() {
            var layer = layui.layer,
                $ = layui.jquery,
                form = layui.form,
                laydate= layui.laydate;

            laydate.render({
                istime: true,
                elem: '#arrivalDate' //指定元素
                // ,type: 'datetime'
                ,range: '~' //或 range: '~' 来自定义分割字符
            });

            $(window).on('load', function() {
                //地图功能
                var geocoder;
                var map2;
                var marker=new google.maps.Marker();
                function initialize() {
                    geocoder = new google.maps.Geocoder();
                    var myOptions = {
                        zoom : 10,//缩放比例
                        center:new google.maps.LatLng({if !empty($wherelist['lat'])}{$wherelist['lat']}{else}40.7143528{/if}, {if !empty($wherelist['lng'])}{$wherelist['lng']}{else}-74.0059731{/if}),
                    mapTypeId : google.maps.MapTypeId.ROADMAP
                }
                    map2 = new google.maps.Map(document.getElementById("map"),
                        myOptions);
                    marker.setMap(null);
                    marker = new google.maps.Marker({
                        map : map2,
                        position :new google.maps.LatLng({if !empty($wherelist['lat'])}{$wherelist['lat']}{else}40.7143528{/if}, {if !empty($wherelist['lng'])}{$wherelist['lng']}{else}-74.0059731{/if}),
                    //坐标动画效果
                    animation : google.maps.Animation.DROP
                });
                    marker.setMap(map2);
                    codeAddress();
                }

                function codeAddress(address) {
                    //地址解析
                    geocoder.geocode({
                        'address' : address
                    }, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            //依据解析的经度纬度设置坐标居中
                            map2.setCenter(results[0].geometry.location);
                            marker = new google.maps.Marker({
                                map : map2,
                                position : results[0].geometry.location,
                                title : address,
                                //坐标动画效果
                                animation : google.maps.Animation.DROP
                            });

                            $("input[name=lat]").val(results[0].geometry.location.lat);
                            $("input[name=lng]").val(results[0].geometry.location.lng);

                            marker.setMap(map2);
                        }
                    });
                }

                function Address(obj) {
                    var address = document.getElementById(obj).value;
                    var addressbox="";
                    //地址解析
                    geocoder.geocode({
                        'address' : address
                    }, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            for(var i in results){
                                if(i>4){
                                    break;
                                }
                                addressbox+="<span>"+results[i].formatted_address+"</span>";
                            }
                            $(".addressbox").html(addressbox);
                        }
                    });
                }

                initialize();

                $("#address").on("input",function(){
                    $(".addressbox").html("");
                    if($("#address").val()==''){
                        $("input[name=lat]").val('');
                        $("input[name=lng]").val('');
                    }
                    Address("address");
                });

                $(".addressbox").on("click","span",function(){
                    marker.setMap(null);
                    $("#address").val($(this).html());

                    codeAddress($(this).html());
                });

                $("body").on("click",function(){
                    $(".addressbox").html("");
                })
            });
        });
    </script>


</body>
</html>
